import { getPromotionProject } from '@/services/api/api-promotion';
import { DrawerForm } from '@ant-design/pro-form';
import ProList from '@ant-design/pro-list';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { Descriptions, Divider, Space, Spin, Tag, Typography } from 'antd';
import 'dayjs/locale/zh-cn';
import React, { useRef, useState } from 'react';
import DetailsDouyin from './details/DetailsDouyin';
import DetailsGongzhonghao from './details/DetailsGongzhonghao';
import DetailsShipinhao from './details/DetailsShipinhao';
import { useAccess } from 'umi';

interface DetailsPromotionProjectProps {
  showType: string;
  project: PromotionData.Project;
  onRefurbish: () => void;
}
/**
 * 管理员的详情
 * @param param0
 * @returns
 */
const DetailsPromotionProject: React.FC<DetailsPromotionProjectProps> = ({ showType, project }) => {
  const actionRef = useRef<ActionType>();
  const access = useAccess();

  const [projectDetails, setProjectDetailsState] = useState<PromotionData.ProjectDetails>();

  /**
   * 加载话题配置
   * @param key
   */
  const loadData = async () => {
    try {
      const response = await getPromotionProject({ id: project.id });
      if (response.code === 0) {
        setProjectDetailsState(response.data);
      }
    } catch (error) {}
  };

  const description = (row: PromotionData.TaskDetails) => {
    const type = row?.type;

    if (type === 1) {
      return (
        <>
          <Typography.Paragraph>
            <blockquote>{row?.route}</blockquote>
          </Typography.Paragraph>

          {showType == 'project' && (
            <Descriptions>
              <Descriptions.Item label="阅读时长（秒）">{row?.isDemandReadTime}</Descriptions.Item>
              <Descriptions.Item label="是否分享">
                {row?.isDemandShare === 0 ? '否' : '是'}
              </Descriptions.Item>
              {row?.isDemandShare === 1 && (
                <Descriptions.Item label="分享后是否需要第三方阅读">
                  {row?.isDemandShareRead === 0 ? '否' : '是'}
                </Descriptions.Item>
              )}
            </Descriptions>
          )}

          {row?.remarks !== undefined && row.remarks !== null && (
            <Descriptions>
              <Descriptions.Item label="备注">{row?.remarks}</Descriptions.Item>
            </Descriptions>
          )}
        </>
      );
    } else if (type === 2) {
      return (
        <>
          <Typography.Paragraph>
            <blockquote>{row?.routeFinderUserName}</blockquote>
          </Typography.Paragraph>
          <Typography.Paragraph>
            <blockquote>{row?.routeFeedId}</blockquote>
          </Typography.Paragraph>
          {row?.remarks !== undefined && row.remarks !== null && (
            <Descriptions>
              <Descriptions.Item label="备注">{row?.remarks}</Descriptions.Item>
            </Descriptions>
          )}
        </>
      );
    } else if (type === 3) {
      return (
        <>
          <Typography.Paragraph>
            <blockquote>{row?.route}</blockquote>
          </Typography.Paragraph>
          {showType == 'project' && (
            <Descriptions>
              <Descriptions.Item label="是否复制到剪贴板">
                {row?.isDemandShare === 0 ? '否' : '是'}
              </Descriptions.Item>
            </Descriptions>
          )}
          {row?.remarks !== undefined && row.remarks !== null && (
            <Descriptions>
              <Descriptions.Item label="备注">{row?.remarks}</Descriptions.Item>
            </Descriptions>
          )}
        </>
      );
    }
    return <></>;
  };

  return (
    <DrawerForm
      key="details_promotion_project_drawer_form"
      title={
        <>
          <Tag color={project?.run === 1 ? 'green' : project?.run === 2 ? 'red' : 'orange'}>
            {project?.run === 1 ? '进行中' : project?.run === 2 ? '已结束' : '已暂停'}
          </Tag>
          {project.name}
        </>
      }
      drawerProps={{
        maskClosable: true,
        destroyOnClose: true,
      }}
      onVisibleChange={(visible: boolean) => {
        if (visible) {
          loadData();
        }
      }}
      trigger={<a>{project.name}</a>}
      submitter={false}
    >
      <Spin spinning={projectDetails === undefined}>
        <Descriptions>
          <Descriptions.Item span={3} label="名称">
            {projectDetails?.name}
          </Descriptions.Item>
          <Descriptions.Item label="状态">
            {projectDetails?.state === 1 ? '开启' : '关闭'}
          </Descriptions.Item>
          <Descriptions.Item label="创建时间">{projectDetails?.createdTime}</Descriptions.Item>
        </Descriptions>
        <Descriptions>
          <Descriptions.Item label="备注">{projectDetails?.remarks}</Descriptions.Item>
        </Descriptions>
        <Descriptions>
          <Descriptions.Item label="创建人">{projectDetails?.createdAccountName}</Descriptions.Item>
          <Descriptions.Item label="创建组织">
            {projectDetails?.createdOrganizationName}
          </Descriptions.Item>
        </Descriptions>
        <Descriptions>
          <Descriptions.Item label="截至日期">{projectDetails?.deadline}</Descriptions.Item>
        </Descriptions>
        {access.签到推广x列表x管理员 && (
          <>
            <Divider orientation="left" plain>
              指派任务单位
            </Divider>
            <Space wrap>
              {projectDetails?.assignOrganizations?.map((item) => (
                <Tag>{item.name}</Tag>
              ))}
            </Space>
          </>
        )}
        <Divider orientation="left" plain>
          任务列表
        </Divider>
        <ProList<PromotionData.TaskDetails>
          toolBarRender={false}
          rowKey="id"
          showActions="always"
          actionRef={actionRef}
          dataSource={projectDetails?.tasks}
          itemCardProps={{
            style: {
              padding: 12,
            },
            bodyStyle: {
              padding: 12,
            },
          }}
          metas={{
            title: {
              dataIndex: 'name',
              render: (dom: React.ReactNode, entity) => {
                return (
                  <Space
                    align="center"
                    style={{
                      paddingLeft: 12,
                      paddingRight: 12,
                    }}
                  >
                    <Tag
                      style={{
                        display: 'flex',
                        padding: 5,
                      }}
                    >
                      <img
                        width={22.4}
                        style={{
                          margin: 'auto 2px',
                        }}
                        src={
                          entity.type === 1
                            ? 'assets/promotion_icon_gongzhonghao.png'
                            : entity.type === 2
                            ? 'assets/promotion_icon_shipinhao.png'
                            : 'assets/promotion_icon_douyin.png'
                        }
                      />
                      <span>{entity.typeName}</span>
                    </Tag>
                    <span
                      style={{
                        fontSize: 16,
                        fontWeight: 'bold',
                      }}
                    >
                      {entity.type === 1 ? (
                        <DetailsGongzhonghao task={entity} statistics={showType == 'project'} />
                      ) : entity.type === 2 ? (
                        <DetailsShipinhao task={entity} statistics={showType == 'project'} />
                      ) : (
                        <DetailsDouyin task={entity} statistics={showType == 'project'} />
                      )}
                    </span>
                  </Space>
                );
              },
            },
            description: {
              render: (dom: React.ReactNode, entity) => {
                return (
                  <div
                    style={{
                      width: '100%',
                      paddingLeft: 12,
                      paddingRight: 12,
                    }}
                  >
                    {description(entity)}
                  </div>
                );
              },
            },
            content: {},
          }}
        />
        {/* <ProTable<CuesTopicData.UserAccount>
          ghost
          columns={[
            {
              title: '单位',
              key: 'or',
              dataIndex: 'organizationName',
              hideInSearch: true,
              width: 200,
            },
            {
              title: '姓名',
              key: 'name',
              dataIndex: 'name',
            },
            {
              title: '姓名',
              key: 'name',
              dataIndex: 'name',
            },
            {
              title: '姓名',
              key: 'name',
              dataIndex: 'name',
            },
            {
              title: '姓名',
              key: 'name',
              dataIndex: 'name',
            },
          ]}
          request={async (params = {}) => {
            const response = await getShareAccountPage({
              ...params,
            });
            return Promise.resolve({
              data: response.data.data,
              total: response.data.total,
              success: response.code === 0,
            });
          }}
          rowKey="id"
          tableLayout="fixed"
          dateFormatter="string"
          headerTitle={false}
          bordered
          options={{
            search: {
              name: 'name',
              onSearch: (keyword: string) => {
                return true;
              },
            },
          }}
          search={false}
          pagination={{
            showQuickJumper: false,
            showSizeChanger: false,
            defaultPageSize: 100,
            showLessItems: false,
          }}
        /> */}
      </Spin>
    </DrawerForm>
  );
};
export default DetailsPromotionProject;
